<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <!-- 公安备案 -->
     <el-table :data="p" style="width: 100%" border>
      <el-table-column label="公安备案" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.publiceSecurity }}</span>
        </template>
      </el-table-column>

      <el-table-column label="ICP" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.icp }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id,scope.$index,scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="修改"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="dForm"
      >
        <el-form-item label="公安备案">
          <el-input v-model="dForm.publiceSecurity"></el-input>
        </el-form-item>
        <el-form-item label="ICP号">
          <el-input v-model="dForm.icp"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePut">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import Breadcrumb from "../views/Breadcrumb.vue";
import { getPublciICP, putPublicMsg } from "../api/public";
export default {
  components: {
    Breadcrumb,
  },
  mounted() {
    getPublciICP().then(({ data }) => {
      this.p.push(data.data);
    });
  },
  methods: {
    // 点击编辑时
    handleEdit(id, index,row) {
      this.cindex = index
      this.centerDialogVisible = true;
      this.publiceId = id;
      this.dForm.publiceSecurity = row.publiceSecurity;
      this.dForm.icp = row.icp;
    },
    // 修改信息
    handlePut() {
      this.centerDialogVisible = false;
      putPublicMsg(this.publiceId, this.dForm).then(({ data }) => {
        this.p.splice(this.cindex,1)
        this.p.push(data.data)
        this.$message({
          type: "success",
          message: data.msg,
        });
      });
    },
  },

  data() {
    return {
      cindex:0,
      labelPosition: "top",
      centerDialogVisible: false,
      //公安备案数据
      dForm: {
        publiceSecurity: "",
        icp: "",
      },
      publiceId: 0,
      p: [],
    };
  },
};
</script>

<style scoped>
/* 使表格文字居中 */
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center !important;
}
</style>